<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN -->
		<view class="status_bar"></view>
		<text v-if="showBackIcon" class="custom-icon custom-icon-jiantou2" @click="leftClick"></text>
		<!-- <my-navbar v-if="showBackIcon" leftText=" " @leftClick="leftClick" background="#4fa388" leftIconColor="white"></my-navbar> -->
		<!-- #endif -->
		<view class="top">
			<image class="login_logo" :src="logoUrl" mode="aspectFit"></image>
		</view>
		<div class="login">
			<view class="select_way">
				<view class="title">
					<text class="wel">欢迎</text><br>
					<text class="login_name">登录</text>
				</view>
				<view class="input_box mobile_val">
					<view class="bold eighteen">手机号</view>
					<input v-model="phone" type="text" value="" placeholder="请输入手机号" placeholder-class="twelve_font"
						class="twelve_font" placeholder-style="color:#c0c0c0;" />
				</view>
				<view class="input_box pwd_val">
					<view class="bold eighteen">密码</view>
					<input v-model="password" type="password" value="" placeholder="请输入密码"
						placeholder-class="twelve_font" class="twelve_font" placeholder-style="color:#c0c0c0;" />
				</view>
			</view>
			<view class="bg">
				<view class="submit" @click="submit">提交</view>
				<view class="other_btn flex-around">
					<text v-show="showRegist" @click="navigato(1)">立即注册</text>
					<text @click="navigato(2)">忘记密码</text>
				</view>
				<!-- #ifndef APP-PLUS -->
				<u-divider>OR</u-divider>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="wxlogin wxbtn" @click="wxLogin" open-type="getUserInfo">
					<image src="../../static/image/7.png" mode=""></image>
					<text>微信登录</text>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="wxlogin" @click="wxLogin">
					<image src="../../static/image/7.png" mode=""></image>
					<text>微信登录</text>
				</view>
				<!-- #endif -->
			</view>
		</div>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				//是否可以返回到首页
				showBackIcon: false,
				showRegist: true,
				logoUrl: '',
				phone: '',
				password: '',
				isshowProp: false,
				//登陆权限
				loginVolid: {},
				code: null,
				href: null,
			}
		},
		onLoad() {
			var token = uni.getStorageSync('copartner_token');
			if (token) {
				uni.switchTab({
					url: '../tabar/index'
				})
			} else {
				this.getInfo();
			}
		},
		onShow() {
			// #ifdef H5
			let search = location.search;
			let code = search.substring(search.indexOf('=') + 1, search.lastIndexOf('&'));
			this.code = code;
			let isWeixin = uni.getStorageSync('isWeixin');
			if (isWeixin && code) {
				let params = {
					loginType: 'wechat',
					type: 'default',
					code: code
				};
				$https('POST', 'wxLogin', params, res => {
					uni.removeStorageSync('isWeixin');
					if (res.data.errcode == 0) {
						if (res.data.data.token) {
							uni.setStorageSync("copartner_token", res.data.data.token);
							uni.reLaunch({
								url: '/pages/tabar/index'
							})
						} else {
							// uni.showModal({
							// 	content:res.data.data.user_openid
							// })
							uni.navigateTo({
								url: `/pages/account/need_bind?user_openid=${res.data.data.user_openid}`
							})
						}
					} else {
						//到需要绑定界面返回会提示openid已被使用
						uni.showToast({
							icon: 'none',
							title: res.data.errmsg,
						})
					}
				}, true)
			}
			// #endif
		},
		methods: {
			getInfo() {
				$https('GETN', 'loginInfo', {}, res => {
					this.logoUrl = res.data.data.info.site_logo;
					uni.setNavigationBarTitle({
						title: res.data.data.info.site_title
					});
					this.loginVolid = {
						"is_login_index": res.data.data.info.is_login_index,
						"is_login_my": res.data.data.info.is_login_my,
						"is_login_cart": res.data.data.info.is_login_cart,
						"is_login_category": res.data.data.info.is_login_category,
					}
					if (res.data.data.info.is_login_index == 0) {
						this.showBackIcon = true;
					}
					this.showRegist = res.data.data.info.open_registration == 2 ? false : true;
					uni.setStorageSync('showRegist', res.data.data.info.open_registration);
					uni.setStorageSync('title', res.data.data.info.site_title);
					uni.setStorageSync('logo', this.logoUrl);
					uni.setStorageSync('loginVolid', this.loginVolid);
					this.companyList = res.data.data.company_list;
				}, true)
			},
			submit() {
				if (!this.phone || !this.password) {
					uni.showToast({
						title: '账号或密码不能为空',
						icon: 'none'
					});
					return;
				} else if (!(/^1[23456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
					return;
				} else {
					var params = {
						mobile: this.phone,
						password: this.password,
					}
					$https('POST', 'login', params, res => {
						if (res.data.errcode == 0) {
							uni.setStorageSync("copartner_token", res.data.data.token);
							uni.reLaunch({
								url: '../tabar/index'
							})
							return;
						}
						var msg;
						if (res.data.errmsg) {
							msg = res.data.errmsg;
						} else {
							res.data.errors.mobile ?
								msg = res.data.errors.mobile[0] :
								res.data.errors.password ?
								msg = res.data.errors.password[0] :
								''

						}
						uni.showToast({
							title: msg,
							icon: 'none'
						});
					})
				}
			},
			navigato(type) {
				if (type == 1) {
					uni.navigateTo({
						url: '../account/register'
					})
				} else if (type == 2) {
					uni.navigateTo({
						url: '../account/forget'
					})
				}
			},
			leftClick() {
				uni.switchTab({
					url: '../tabar/index'
				})
				// // #ifdef H5
				// 	window.history.back(-1);
				// // #endif 
				// // #ifndef H5
				// 	uni.navigateBack();
				// // #endif
			},
			wxLogin() {
				// #ifdef H5
				let params = {
					type: 'default'
				}
				$https('GETN', 'wxConfig', params, res => {
					if (res.data.errcode == 0) {
						uni.setStorageSync('isWeixin', true)
						let url = getApp().globalData.rootUrl + "/cmp#/pages/account/login";
						url = encodeURIComponent(url);
						let a =
							`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.data.data.appId}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo#wechat_redirect`;
						window.location.href = a;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.errmsg
						})
					}
				}, true)
				// #endif
				// #ifdef MP-WEIXIN
				uni.getUserInfo({
					provider: 'weixin',
					success: (infoRes) => {
						let {
							encryptedData,
							iv
						} = infoRes;
						uni.login({
							success: (res) => {
								let params = {
									loginType: 'wechat',
									type: 'mini',
									code: res.code,
									encryptedData,
									iv,
								};
								$https('POST', 'wxLogin', params, res => {
									if (res.data.errcode == 0) {
										if (res.data.data.token) {
											uni.setStorageSync("copartner_token", res.data
												.data.token);
											uni.reLaunch({
												url: '/pages/tabar/index'
											})
										} else {
											uni.navigateTo({
												url: `/pages/account/need_bind?user_openid=${res.data.data.user_openid}`
											})
										}
									} else {
										uni.showToast({
											icon: 'none',
											title: res.data.errmsg
										})
									}
								}, true)
							}

						})
					},
					fail(err) {
						
					}
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		background: #4fa388;
	}

	.page {
		background: #4fa388;
		min-height: 100vh;
		position: relative;
		display: flex;
		flex-direction: column;

		.custom-icon {
			position: absolute;
			top: 20rpx;
			// #ifdef APP-PLUS
			top: calc(20rpx + var(--status-bar-height));
			// #endif
			left: 20rpx;
			font-size: 60rpx;
			color: #fff;
		}

		.top {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 360rpx;

			.login_logo {
				height: 200rpx;
			}
		}

		.login {
			min-height: calc(100vh - 360rpx);
			display: flex;
			flex-direction: column;

			.select_way {
				// height:500rpx;
				background: #fff;
				border-top-right-radius: 100%;
				padding: 38rpx 28rpx 0;

				.title {
					.wel {
						font-size: 36rpx;
						color: #515151;
						font-weight: 500;
					}

					.login_name {
						font-size: 60rpx;
						font-weight: 600;
						color: #191919;
					}
				}

				.input_box {
					margin-top: 48rpx;

					.bold:first-child {
						margin-bottom: 18rpx;
					}

					.input {
						color: rgb(192, 192, 192);
						border-bottom: 1px solid #d5d5d5;
						width: 60%;
						font-size: 32rpx;
						padding: 8rpx 0;

						&.active {
							color: #000;
						}
					}

					&>input {
						padding: 8rpx 0;
					}
				}
			}

			.bg {
				flex: 1;
				background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;

				.other_btn {
					width: 100%;
					padding: 40rpx 160rpx;
					color: #9A9A9A;
					font-size: 24rpx;
				}

				.submit {
					width: 578rpx;
					height: 80rpx;
					color: #fff;
					background: #4FA388;
					box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
					border-radius: 48rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 40rpx;
				}

				.bottom {
					position: fixed;
					bottom: 30rpx;
					text-align: center;

					.green {
						color: #4fa388;
					}
				}
			}
		}

		input {
			border-bottom: 1px solid #d5d5d5;
			width: 60%;
		}

		/deep/.u-divider {
			display: flex;
			padding: 0 28rpx;

			.u-divider-line {
				flex: 1;
			}
		}

		.wxlogin {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 16rpx;
			color: #4E5452;
			margin-top: 24rpx;
			margin-bottom: 20rpx;

			image {
				width: 52rpx;
				height: 40rpx;
				margin-bottom: 8rpx;
			}

			&.wxbtn {
				background: none;
				border: none;

				&::after {
					border: none;
				}
			}
		}
	}
</style>
